<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    size="default"
    status-icon
  >
    <el-form-item label="属性类型:">
      <!-- :options="options"下拉的内容 -->
      <el-cascader
        v-model="ruleForm.productid"
        :options="options"
        @change="optionChang"
      />
      {{ ruleForm.productid }}
    </el-form-item>
    <el-form-item label="商品规格:">
      <el-card shadow="never" class="box-card">
        <div v-for="item in Specification" :key="item" class="text item">
          {{ item.name + ":" }}
          <div><el-checkbox :label="item.inputList" size="large" /></div>
        </div>
      </el-card>
    </el-form-item>
    <el-form-item>
      <div>
        <!-- 3个小按钮 -->
        <el-button size="small" type="primary">按钮</el-button>
        <el-button size="small" type="primary">按钮</el-button>
        <el-button size="small" type="primary">按钮</el-button>
      </div>
    </el-form-item>
    <!-- 表格 -->
    <el-form-item label="商品规格:">
      <el-table :data="tableData" :border="true" style="width: 100%">
        <el-table-column prop="date" label="销售价格" width="150" />
        <el-table-column prop="name" label="商品库存" width="150" />
        <el-table-column prop="name" label="库存预警值" width="150" />
        <el-table-column prop="name" label="SKU编号" width="150" />
        <el-table-column prop="name" label="操作" width="150" />
      </el-table>
    </el-form-item>
    <!--  -->
    <el-form-item label="商品参数:">
      <el-card shadow="never" class="box-card">
        <div v-for="item in parameters" :key="item" class="text item">
          <div>
            {{ item.name + ":" }}
          </div>
          <!-- v-model="" -->
          <el-input style="margin-left: 10px" />
        </div>
      </el-card>
    </el-form-item>
    <el-form-item>
      <!-- 上传相册 -->
      <!-- 这是一个表单提交的动作，它将数据发送到URL为https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15的API端点,这个端点是别人提供的端点 -->
      <el-upload
        name="file"
        v-model:file-list="fileList"
        action="http://120.24.64.5:8088/mall-admin/minio/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :limit="5"
        :on-exceed="limitPoint"
        :on-success="chack"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <!-- 点击放大的图 -->
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <!-- 富文本 -->
    <el-form-item>
      <el-tabs type="card" class="demo-tabs">
        <el-tab-pane label="电脑端详情">
          <!-- 富文本框 -->

          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 370px; overflow-y: hidden"
              v-model="ruleForm.detailHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="移动端详情">
          <!-- 移动端富文本 -->
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRefa"
              :defaultConfig="toolbarConfiga"
              :mode="mode"
            />
            <Editor
              style="height: 370px; overflow-y: hidden"
              v-model="ruleForm.detailHtml"
              :defaultConfig="editorConfiga"
              :mode="mode"
              @onCreated="handleCreateda"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form-item>

    <!-- 按钮 -->
    <el-button
      style="margin-left: 130px; margin-top: 5px"
      @click="chanddis"
      type="primary"
      >上一步，填写商品促销</el-button
    >
    <el-button
      style="margin-left: 180px; margin-top: 5px"
      @click="chandnext"
      type="primary"
      >下一步，填写商品属性</el-button
    >
    {{ fileList }}
  </el-form>
</template>

<script setup lang="ts">
import * as api from "@/request/http";
import { ElMessage, UploadProps, UploadUserFile } from "element-plus";
import { reactive, ref, onBeforeUnmount, shallowRef, onMounted } from "vue";
// 引用富文本框
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const mode = ref("default");
// 下拉框数据
const options = ref<IChildList[]>([]);
const optionChang = () => {
  api.addProduct
    .productAttributeList({
      type: 0,
      pageNum: 1,
      pageSize: 100,
      id: ruleForm.productid,
    })
    .then((res) => {
      console.log(res);
      // 商品规格
      Specification.value = res.data.list.map((item) => {
        return {
          name: item.name,
          relatedStatus: item.inputList,
        };
      });
    });
  // type为1是
  api.addProduct
    .productAttributeListType({
      type: 1,
      pageNum: 1,
      pageSize: 100,
      id: ruleForm.productid,
    })
    .then((res) => {
      console.log(res);
      parameters = res.data.list.map((item) => {
        return {
          name: item.name,
        };
      });
    });
};
let Specification = ref<any>([]);
let parameters = ref<any>([]);
let tableData = ref<any>([]);
// 表单的校验
interface RuleForm {
  productid: number;
  albumPics: string;
  detailHtml: any;
}
// 表单数据
const ruleForm = reactive<RuleForm>({
  productid: 0,
  // 照片的参数
  albumPics: "",
  // 富文本
  detailHtml: "",
});
onMounted(() => {});
// 进入页面发起下拉的请求
api.addProduct.productCategoryList().then((res) => {
  console.log(res.data.list);
  options.value = res.data.list.map((item) => {
    return {
      value: item.id,
      label: item.name,
    };
  });
});

// 上传照片数据
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
// 存放我们上传渲染传来的照片数据
const fileList = ref<any>([]);
let arr = ref([]);
const chack = () => {
  arr.value = fileList.value.map((item: any) => item.response.data.url);
  ruleForm.albumPics = arr.value.join(",");
};

// 超出限制提示
const limitPoint = () => {
  ElMessage.error("上传失败，最多只能上传5张图片");
};
// 点击删除按钮
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
// :on-preview="handlePictureCardPreview"：当用户点击预览某个文件时
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile.url);
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
// 点击按钮跳转
// 表单的传值
// 接收父组件传过来的方法
const emits = defineEmits<{
  (e: "bingnext", a: number): void;
  (e: "fromNext", a: object): void;
}>();
// 点击按钮,传值到下一页面
const chandnext = () => {
  console.log(arr);
  console.log(fileList.value);
  // emits("fromNext", ruleForm);
  emits("bingnext", 3);
  emits("fromNext", ruleForm);
};
// 点击上一页回到上一页
const chanddis = () => {
  emits("bingnext", 1);
};

// 父文本框
// 编辑器实例，必须用 shallowRef。只处理了 value 的响应式, 不进行对象的 reactive 处理，也就是说如果传给 shallowRef 一个对象，这个对象的任何一层属性都不是响应式的。
const editorRef = shallowRef();

// 内容 HTML
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    ruleForm.detailHtml = "<p>电脑端富文本</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
//
// 移动端
// 父文本框
// 编辑器实例，必须用 shallowRef。只处理了 value 的响应式, 不进行对象的 reactive 处理，也就是说如果传给 shallowRef 一个对象，这个对象的任何一层属性都不是响应式的。
const editorRefa = shallowRef();

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    ruleForm.detailHtml = "<p>移动端富文本</p>";
  }, 1500);
});

const toolbarConfiga = {};
const editorConfiga = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editora = editorRefa.value;
  if (editora == null) return;
  editora.destroy();
});

const handleCreateda = (editor: any) => {
  editorRefa.value = editor; // 记录 editor 实例，重要！
};
</script>

<style scoped lang="less">
// 卡片
.text {
  font-size: 14px;
}

.item {
  display: flex;
  align-content: center;
  padding: 18px 0;
}

.box-card {
  width: 600px;
  background-color: #f8f9fc;
}
// 富文本选择框
.el-tabs.el-tabs--top.el-tabs--border-card.demo-tabs {
  width: 600px;
}
:deep(.el-tabs__content) {
  padding: 0;
}
</style>
